<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        #showDiv{
            position: absolute;
            left: 0px;
            top: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(255,0,0,0.4);

            visibility: hidden;
        }

        #contentDiv{
            background-color: white;
            width: 500px;
            height: 400px;
        }
    </style>
    <script src="/html/axios.min.js"></script>
    <script>
        window.onload = function () {

            axios.get("/user/getUser").then(resp => {
                if (resp.data == '') {
                    $("loginSpan").innerHTML = "您好！请先<a href='/html/login.html'>登录</a>"
                } else {
                    $("loginSpan").innerHTML = "欢迎光临" + resp.data.name;
                }
            });

            fullTable();
        }

        function $(id) {
            return document.getElementById(id);
        }

        function fullTable() {

            axios.get("/book/findAll").then(resp => {
                var str = "";
                resp.data.forEach(n => {
                    str += `<tr><td>${n.name}</td><td>${n.auth}</td><td>${n.price}</td>
                <td><input type="button" value="查看" onclick="findById(${n.id})"></td></tr>`;
                });
                $("bookData").innerHTML = str;
            })
        }


        function findById(id) {

            $("showDiv").style.visibility = "visible";
            $("showDiv").style.width = document.documentElement.clientWidth+"px";
            $("showDiv").style.height = document.documentElement.clientHeight+"px";


            axios.get("/book/findById",{
                params:{
                    id:id
                }
            }).then(resp =>{
                var bookObj = resp.data;

                $("nameSpan").innerHTML = bookObj.name;
                $("authSpan").innerHTML = bookObj.auth;
                $("priceSpan").innerHTML = bookObj.price;
                $("bookId").value = bookObj.id;
                $("bookImg").src = "/html/img/"+bookObj.imgPath;

                var str = "";
                bookObj.speakList.forEach(e =>{
                    str += `<tr><td>${e.user.name}</td><td>${e.content}</td><td>${e.date}</td></tr>`;
                });
                $("speakData").innerHTML = str;

            })

        }

        function addSpeak() {

            axios.get("/speak/add",{
                params:{
                    bookId:$("bookId").value,
                    content:$("content").value
                }
            }).then(resp =>{
                if (resp.data == "noLogin"){
                    location.href = "/html/login.html";
                }
                else if (resp.data == "ok"){
                    findById($("bookId").value);
                }

            })
        }

        function no() {

            $("showDiv").style.visibility = "hidden";
        }
    </script>


</head>
<body>

<span id="loginSpan"></span>

<table width="60%" border="2" cellspacing="0">
    <thead>
    <tr>
        <th>书名</th>
        <th>作者</th>
        <th>单价</th>
        <th>查看</th>
    </tr>
    </thead>
    <tbody id="bookData"></tbody>
</table>

<div id="showDiv">
    <div id="contentDiv">
        <img src="" id="bookImg" width="200" height="200"><br>
        书名：<span id="nameSpan"></span>
        作者：<span id="authSpan"></span>
        单价：<span id="priceSpan"></span>
        <input type="hidden" id="bookId">

        <table border="1" cellspacing="0" width="80%">
            <thead>
            <tr><th>评论人姓名</th><th>评论内容</th><th>评论日期</th></tr>
            </thead>
            <tbody id="speakData"></tbody>
        </table>

        请输入评论：<input type="text" id="content">
        <input type="button" value="评论" onclick="addSpeak()">
        <input type="button" value="返回" onclick="no()">
    </div>
</div>
</body>
</html>